<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            --atom-size: 180px;
            --atom-color-hex: #00d8ff;
            --atom-color-rgb: 0, 216, 255;
            --nucleus-size: calc(var(--atom-size) / 5);
            --electron-color-hex: #99f8ff;
            --electron-size: calc(var(--atom-size) / 25);
            --electron-orbit-size: calc(var(--atom-size) / 2.5);
            --electron-speed: 1.2s;
            --electron-speed-alpha: 1s;
            --electron-speed-omega: .8s;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #1f1f1f;
        }

        body {
            display: grid;
            place-items: center;
            box-sizing: border-box;
        }

        *,
        *:before,
        *::after {
            box-sizing: border-box;
        }


        /* Atom */
        .atom {
            position: relative;
            width: var(--atom-size);
            height: var(--atom-size);
            animation: 8s atom infinite cubic-bezier(1, .25, 0, .75);
        }

        @keyframes atom {
            0% {
                transform: rotate(0deg) scale(1);
            }

            12.5% {
                transform: rotate(-45deg) scale(.9);
            }

            25% {
                transform: rotate(-90deg) scale(1);
            }

            37.5% {
                transform: rotate(-135deg) scale(.9);
            }

            50% {
                transform: rotate(-180deg) scale(1);
            }

            62.5% {
                transform: rotate(-225deg) scale(.9);
            }

            75% {
                transform: rotate(-270deg) scale(1);
            }

            87.5% {
                transform: rotate(-315deg) scale(.9);
            }

            100% {
                transform: rotate(-360deg) scale(1);
            }
        }

        /* Nucleus */
        .atom::before {
            content: '';
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            width: var(--nucleus-size);
            height: var(--nucleus-size);
            margin-top: calc(var(--nucleus-size) / -2);
            margin-left: calc(var(--nucleus-size) / -2);
            background: var(--electron-color-hex);
            /* var(--atom-color-hex); */
            border-radius: 100%;
            box-shadow: 0 0 3px 0 var(--atom-color-hex);
            animation: 2s nucleus infinite cubic-bezier(.65, 0, .35, 1);
        }

        @keyframes nucleus {
            0% {
                transform: scale(1);
            }

            25% {
                transform: scale(.9);
            }

            50% {
                transform: scale(1);
            }

            75% {
                transform: scale(.85);
            }

            100% {
                transform: scale(1);
            }
        }

        /* Electron Orbit */
        .atom>[class^="electron"] {
            border-top: solid rgba(var(--atom-color-rgb), .5) 1px;
            border-right: solid rgba(var(--atom-color-rgb), .35) 2px;
            border-bottom: solid rgba(var(--atom-color-rgb), .2) 4px;
            border-left: solid rgba(var(--atom-color-rgb), 0) 2px;
            border-radius: 100%;
            width: 100%;
            height: var(--electron-orbit-size);
            position: absolute;
            top: 50%;
            margin-top: calc(var(--electron-orbit-size) / -2);
            animation: var(--electron-speed) electron-orbit infinite linear;
        }

        .atom>.electron-alpha {
            transform: rotate(60deg);
            animation: var(--electron-speed-alpha) electron-orbit infinite linear;
        }

        .atom>.electron-omega {
            transform: rotate(-60deg);
            animation: var(--electron-speed-omega) electron-orbit infinite linear;
        }

        @keyframes electron-orbit {
            0% {
                border-top: solid rgba(var(--atom-color-rgb), .5) 1px;
                border-right: solid rgba(var(--atom-color-rgb), .35) 2px;
                border-bottom: solid rgba(var(--atom-color-rgb), .2) 4px;
                border-left: solid rgba(var(--atom-color-rgb), 0) 2px;
            }

            25% {
                border-top: solid rgba(var(--atom-color-rgb), .35) 1px;
                border-right: solid rgba(var(--atom-color-rgb), .2) 2px;
                border-bottom: solid rgba(var(--atom-color-rgb), 0) 4px;
                border-left: solid rgba(var(--atom-color-rgb), .5) 2px;
            }

            50% {
                border-top: solid rgba(var(--atom-color-rgb), .2) 1px;
                border-right: solid rgba(var(--atom-color-rgb), 0) 2px;
                border-bottom: solid rgba(var(--atom-color-rgb), .5) 4px;
                border-left: solid rgba(var(--atom-color-rgb), .35) 2px;
            }

            75% {
                border-top: solid rgba(var(--atom-color-rgb), 0) 1px;
                border-right: solid rgba(var(--atom-color-rgb), .5) 2px;
                border-bottom: solid rgba(var(--atom-color-rgb), .35) 4px;
                border-left: solid rgba(var(--atom-color-rgb), .2) 2px;
            }

            100% {
                border-top: solid rgba(var(--atom-color-rgb), .5) 1px;
                border-right: solid rgba(var(--atom-color-rgb), .35) 2px;
                border-bottom: solid rgba(var(--atom-color-rgb), .2) 4px;
                border-left: solid rgba(var(--atom-color-rgb), 0) 2px;
            }
        }

        /* Electron Unit */
        .atom [class^="electron"]::after {
            content: '';
            display: block;
            width: var(--electron-size);
            height: var(--electron-size);
            background: var(--electron-color-hex);
            border-radius: 50%;
            margin-top: calc(var(--electron-size) / -2);
            position: absolute;
            top: 50%;
            left: calc(var(--electron-size) / -1);
            transform: scale(1);
            animation: calc(var(--electron-speed) * 2) electron infinite ease-in-out;
        }

        .atom .electron-alpha::after {
            animation: calc(var(--electron-speed-alpha) * 2) electron infinite ease-in-out;
        }

        .atom .electron-omega::after {
            animation: calc(var(--electron-speed-omega) * 2) electron infinite ease-in-out;
        }

        @keyframes electron {
            0% {
                left: calc(var(--electron-size) / -1);
                transform: scale(1);
            }

            12.5% {
                top: 100%;
                transform: scale(1.5);
            }

            25% {
                left: 100%;
                transform: scale(1);
            }

            37.5% {
                top: 0%;
                transform: scale(.25);
            }

            50% {
                left: calc(var(--electron-size) / -1);
                transform: scale(1);
            }

            62.5% {
                top: 100%;
                transform: scale(1.5);
            }

            75% {
                left: 100%;
                transform: scale(1);
            }

            87.5% {
                top: 0%;
                transform: scale(.25);
            }

            100% {
                left: calc(var(--electron-size) / -1);
                transform: scale(1);
            }
        }

        /* Shadow */
        main {
            position: relative;
        }

        main::after {
            content: '';
            display: block;
            position: absolute;
            top: 115%;
            left: 0;
            width: var(--atom-size);
            height: var(--nucleus-size);
            background-image: radial-gradient(closest-side, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
            border-radius: 100%;
            transform: scale(1, .8);
            animation: 8s shadow infinite cubic-bezier(1, .25, 0, .75);
        }

        @keyframes shadow {
            0% {
                transform: scale(1, .8) translateY(0);
            }

            12.5% {
                transform: scale(.7, .7) translateY(-20px);
            }

            25% {
                transform: scale(1, .8) translateY(0);
            }

            37.5% {
                transform: scale(.7, .7) translateY(-20px);
            }

            50% {
                transform: scale(1, .8) translateY(0);
            }

            62.5% {
                transform: scale(.7, .7) translateY(-20px);
            }

            75% {
                transform: scale(1, .8) translateY(0);
            }

            87.5% {
                transform: scale(.7, .7) translateY(-20px);
            }

            100% {
                transform: scale(1, .8) translateY(0);
            }
        }
    </style>
</head>

<body>
    <main>
        <div class="atom">
            <div class="electron"></div>
            <div class="electron-alpha"></div>
            <div class="electron-omega"></div>
        </div>
    </main>
</body>

</html>